<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人存款计算器</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script>
        function calc() {
            var money = $("#money").val();
            var monNum = parseInt(money);
            var balance = 0;
            var totalNum = 0;
            var year = $("#year option:selected").text();
            if (year == "一年") {
                balance = monNum * 0.0175;
                totalNum = balance + monNum;
            }
            if (year == "二年") {
                balance = monNum * 0.0225 * 2;
                totalNum = balance + monNum;
            }
            if (year == "三年") {
                balance = monNum * 0.0275 * 3;
                totalNum = balance + monNum;
            }
            if (year == "五年") {
                balance = monNum * 0.0275 * 5;
                totalNum = balance + monNum;
            }
            $("#ban").val(balance);
            $("#total").val(totalNum);
        }
    </script>
</head>

<body>
    <div class="text-center">
        <img src="cmb.png" alt="这是一个logo！" img-center /><br>
    </div>
    <div class="text-center">
        <table class="table table-bordered">
            <tr class="bg-primary">
                <td colspan="2">个人存款计算器</td>
            </tr>
            <tr>
                <td>存款金额</td>
                <td>
                    <input type="text" class="form-control" id="money"></td>
            </tr>
            <tr>
                <td>存款期限</td>
                <td>
                    <select class="form-control" id="year">
                <option>一年</option>
                <option>二年</option>
                <option>三年</option>
                <option>五年</option>
            </select>
                </td>
            </tr>
            <tr>
                <td>所得利息</td>
                <td>
                    <input readonly="readonly " class="form-control" type="text " id="ban">
                </td>
            </tr>
            <tr>
                <td>本息合计</td>
                <td>
                    <input readonly="readonly " class="form-control" type="text " id="total">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button onclick="calc()" class="btn btn-danger form-control">开始计算</button>
                </td>
            </tr>
        </table><br>
        <p>制作人：周浩轩</p>
    </div>
</body>

</html>